<template>
	<!-- 我的鉴定 -->
	<view class="page">
		<view class="bg">
			<view class="nav">
				<view class="tabs">
					<view class="tab" :class="{tab_a:tabIndex==1}" @click="changeTab(1)">
						球鞋鉴定
						<view class="tab_line"></view>
					</view>
					<view class="tab" :class="{tab_a:tabIndex==2}" @click="changeTab(2)">
						奢潮鉴定
						<view class="tab_line"></view>
					</view>
				</view>

				<view class="date" @click="show=true">
					<image class="date_icon" src="/static/tabbar/date_icon.png" mode=""></image>
					日期
				</view>
			</view>
		</view>
		

		<view class="list">
			<c-scroll-list ref="list" :api="api" :option="{auto:false}" :apiParams="apiParams" @load="load">
				<view class="list_item" v-for="(item,index) in orderList" :key="index"
					@click="$fn.jumpPage(`/pages/myIdentify/pages/identificationDetails?param=${item.number}`)">
					<view class="list_item_l">
						<image class="img" :src="vuex_imgUrl+JSON.parse(item.itemImage)[0]" mode=""></image>
						<view class="info">
							<view class="title">鉴定编号：{{item.number}}</view>
							<view class="date">{{$fn.parseTime(item.createTime)}}</view>
							<view class="auth a1" v-if="item.identified==0">待鉴定</view>
							<view class="auth a2" v-else>已鉴定</view>
						</view>
					</view>
					<view class="list_item_r">
						<view class="text" v-if="item.authenticationResult==3">待补图</view>
						<view class="text" v-if="item.authenticationResult==2">无法判断</view>
						<image class="asTrue" v-if="item.authenticationResult==0" src="/static/tabbar/asTrue.png"
							mode=""></image>
						<image class="asTrue" v-if="item.authenticationResult==1" src="/static/tabbar/asFalse.png"
							mode=""></image>
					</view>
				</view>
			</c-scroll-list>
		</view>
		<u-calendar :show="show" :minDate="minDate" :defaultDate="apiParams.createTime" monthNum="37" title="选择日期" color="#01FFCC" round="10"
			@confirm="confirm" @close="show=false"></u-calendar>
	</view>
</template>

<script>
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	export default {
		name: "myIdentify",
		data() {
			return {
				orderList: [],
				tabIndex: 1,
				api: this.$api.getMyIdentifyOrderList,
				apiParams: {
					itemType: 1,
					createTime: null
				},
				maxDate: `${year}-${month}-${date}`,
				minDate: `${year-3}-${month}-${date}`,
				show: false
			};
		},
		onLoad() {

		},
		onShow() {
			this.refresh()
		},
		methods: {
			// 刷新
			refresh() {
				// if (!this.vuex_token) return
				setTimeout(() => this.$refs.list.initList(), 500)
			},

			// 选择日期
			confirm(e) {
				console.log(e, '选择日期');
				this.apiParams.createTime = e[0];
				this.refresh()
				this.show = false;

			},
			changeTab(v) {
				this.tabIndex = v
				this.apiParams.itemType = v
				this.refresh()
			},

			// 获取数据列表
			load(res) {
				console.log(res, '列表数据');
				this.orderList = res.list
			}

		}
	};
</script>

<style lang="scss" scoped>
	.bg {
		width: 750rpx;
		height: calc(env(safe-area-inset-top) + 140rpx);
		background: linear-gradient(180deg, #D9FFF0 40%, rgba(217, 255, 240, 0) 100%);

		.nav {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: calc(40rpx + env(safe-area-inset-top)) 32rpx 40rpx;
			box-sizing: border-box;

			.tabs {
				display: flex;

				.tab {
					width: 230rpx;
					font-size: 32rpx;
					color: #666666;
				}

				.tab_a {
					font-weight: bold;
					font-size: 36rpx;
					color: #1A1A1A;

					.tab_line {
						width: 144rpx;
						height: 12rpx;
						background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
						margin-top: -10rpx;
					}
				}
			}

			.date {
				width: 128rpx;
				height: 48rpx;
				border-radius: 8rpx;
				border: 1rpx solid #1A1A1A;
				font-size: 28rpx;
				color: #333333;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 6rpx;

				.date_icon {
					width: 28rpx;
					height: 28rpx;
				}

			}

		}
	}

	.list {
		padding: 0 32rpx;
		box-sizing: border-box;

		.list_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 28rpx 0;
			border-bottom: 1rpx solid #E6E6E6;

			.list_item_l {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 28rpx;

				.img {
					width: 128rpx;
					height: 128rpx;
					border-radius: 8rpx;
				}

				.info {
					display: flex;
					flex-direction: column;
					height: 128rpx;
					justify-content: space-between;

					.title {
						font-weight: bold;
						font-size: 28rpx;
						color: #1A1A1A;
					}

					.date {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
					}

					.auth {
						font-size: 24rpx;
					}

					.a1 {
						color: #FF9500;
					}

					.a2 {
						color: #01AF21;
					}

				}

			}

			.list_item_r {
				flex: none;
				.text {
					font-size: 28rpx;
					color: #F53100;
				}

				.asTrue {
					width: 80rpx;
					height: 80rpx;
				}

			}
		}
	}

	/deep/.u-calendar-month__days__day__select[data-v-17df7dbd] {
		border-radius: 50% !important;
		color: #1A1A1A !important;
	}

	/deep/.u-button--circle[data-v-2bf0e569] {
		background-color: #1A1A1A !important;
		border: none !important;
		border-radius: 16rpx !important;
	}
</style>